import "./index.scss";
import {
  FullscreenOutlined,
  FullscreenExitOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons";
import { useLocation } from "react-router-dom";
import screenfull from "screenfull";
import { Button, Modal } from "antd";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { createDeleteUserInfoAction } from "../../../redux/action_creators/login_action";
import menuList from "../../../config/menuConfig";

function Header(props) {
  const userInfo = useSelector((state) => state.userInfo);
  const username = userInfo.user.username || "";
  const dispatch = useDispatch();
  const { pathname } = useLocation();
  const [isFull, setIsFull] = useState(false);
  const changeFullScreen = () => {
    screenfull.toggle();
  };
  const getTitle = () => {
    const key = pathname.split("/").pop();
    let title = "";
    menuList.forEach((item) => {
      if (item.children instanceof Array) {
        let child = item.children.find((child) => {
          return child.key === key;
        });
        if (child) {
          title = child.title;
        }
      } else {
        if (item.key === key) {
          title = item.title;
        }
      }
    });
    return title;
  };
  const changeIsFull = () => {
    setIsFull((isFull) => {
      return !isFull;
    });
  };
  const logout = () => {
    Modal.confirm({
      title: "Confirm",
      icon: <ExclamationCircleOutlined />,
      content: "Bla bla ...",
      okText: "确认",
      cancelText: "取消",
      onOk: function () {
        dispatch(createDeleteUserInfoAction());
      },
      onCancel: () => {
        console.log("cancel!");
      },
    });
  };
  useEffect(() => {
    screenfull.on("change", changeIsFull);
    return () => {
      screenfull.off("change", changeIsFull);
    };
  }, []);
  return (
    <header className="header">
      <span>Header...欢迎--{username}</span>
      <h2>{getTitle()}</h2>
      <button onClick={changeFullScreen}>
        {isFull ? (
          <FullscreenExitOutlined style={{ fontSize: "26px", color: "#08c" }} />
        ) : (
          <FullscreenOutlined style={{ fontSize: "16px", color: "#08c" }} />
        )}
      </button>
      <Button type="link" size="small" onClick={logout}>
        Logout
      </Button>
    </header>
  );
}

export default Header;
